 <template>
    <div>
        请输入年份：
        <!-- <el-date-picker type="year" v-model="year1" @blur="search"/> -->
        <el-date-picker v-model="value5" align="right" type="year" placeholder="选择年" @blur="search"> </el-date-picker>
        <div style="height: 30px"></div>
        <div id="myChart" style="width: 800px; height: 500px"></div>
    </div>
</template>

<script>
export default {
    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            xdata: [],
            ydataAdd: [],
            ydataUpdate: [],
            ydataDel: [],
            value5: '2019',
            year: '2019'
            // showData:[]
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        loadData() {
            var _this = this;
            this.xdata = [];
            this.ydataAdd = [];
            this.ydataUpdate = [];
            this.ydataDel = [];

            this.$http.get('http://192.168.1.72:9999/prs/menu/queryOpsByYear?year=' + this.year).then((response) => {
                console.log(response.data);
                var showData = response.data.data;
                for (var i = 0; i < showData.length; i++) {
                    _this.xdata.push(showData[i].yearMonth);
                    _this.ydataAdd.push(showData[i].addOps);
                    _this.ydataUpdate.push(showData[i].updateOps);
                    _this.ydataDel.push(showData[i].deleteOps);
                }
                //   for (var opd in showData) {
                //         _this.xdata.push(opd.yearMonth);
                //         _this.ydataAdd.push(opd.addOps);
                //         _this.ydataUpdate.push(opd.updateOps);
                //         _this.ydataDel.push(opd.deleteOps);
                //   }
                //_this.xdata=JSON.parse(_this.xdata);
                // _this.xdata=['aa','bb','cc'];
                console.log(_this.xdata + '...........');
                console.log(_this.ydataAdd + '...........');
                this.drawLine();
            });
        },
        //查询方法
        search() {
            this.year = this.value5.getFullYear();
            this.loadData();
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            //  var colors = ['#5793f3', '#d14a61', '#675bba'];
            var _this = this;
            console.log(this.xdata + '......3333333333');
            console.log(_this.xdata + '......222222222222');
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '系统操作日志统计',
                    subtext: '完全真实'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['添加操作', '更新操作', '删除操作']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: _this.xdata
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name: '添加操作',
                        type: 'line',
                        data: this.ydataAdd,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: '平均值' }]
                        }
                    },
                    {
                        name: '更新操作',
                        type: 'line',
                        data: this.ydataUpdate,
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: '最大值'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        name: '删除操作',
                        type: 'line',
                        data: this.ydataDel,
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: '最大值'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    }
                ]
            });
        }
    }
};
</script>
<style>
</style>